<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/layui/layui.js"></script>
		<script src="../js/common.js"></script>
	</head>

	<body>
		<style type="text/css">
			.table-1 {
				width: 600px;
				height: 200px;
			}
			
			.table-1 table {
				width: 1000px;
				line-height: 30px;
			}
		</style>
		<div class="table-1 m-table">
			<table>
				<tbody>
					<tr class="fixed-top">
						<td class="fixed-left"><input type="checkbox"/></td>
						<td>首行固定</td>
						<td>首行固定</td>
						<td>首行固定</td>
						<td>首行固定</td>
						<td>首行固定</td>
						<td>首行固定</td>
						<td>首行固定</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr>
						<td class="fixed-left">首列固定</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
						<td>111</td>
						<td>222</td>
					</tr>
					<tr class="fixed-bottom">
						<td class="fixed-left">首列固定</td>
						<td>末行固定</td>
						<td>末行固定</td>
						<td>末行固定</td>
						<td>末行固定</td>
						<td>末行固定</td>
						<td>末行固定</td>
						<td>末行固定</td>
					</tr>
				</tbody>
			</table>
		</div>
		<br /><br />
		<div>
			<button id="btn21">动态添加table</button>
		</div>
		<br /><br />
		<div id="dom2"></div>
		<script type="text/javascript">
			$(function() {
				$('#btn21').click(function() {
					$('#dom2').html('<div class="table-1 m-table"> <table> <tbody> <tr class="fixed-top"> <td class="fixed-left textC"><input type="checkbox"/></td> <td>首行固定</td> <td>首行固定</td> <td>首行固定</td> <td>首行固定</td> <td>首行固定</td> <td>首行固定</td> <td>首行固定</td> </tr> <tr> <td class="fixed-left">首列固定</td> <td>222</td> <td>111</td> <td>222</td> <td>111</td> <td>222</td> <td>111</td> <td>222</td> </tr> <tr> <td class="fixed-left">首列固定</td> <td>222</td> <td>111</td> <td>222</td> <td>111</td> <td>222</td> <td>111</td> <td>222</td> </tr> <tr> <td class="fixed-left">首列固定</td> <td>222</td> <td>111</td> <td>222</td> <td>111</td> <td>222</td> <td>111</td> <td>222</td> </tr> <tr> <td class="fixed-left">首列固定</td> <td>222</td> <td>111</td> <td>222</td> <td>111</td> <td>222</td> <td>111</td> <td>222</td> </tr> <tr> <td class="fixed-left">首列固定</td> <td>222</td> <td>111</td> <td>222</td> <td>111</td> <td>222</td> <td>111</td> <td>222</td> </tr> <tr> <td class="fixed-left">首列固定</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table> </div>');
				});
			});
		</script>
	</body>

</html>